import styles from './index.less';
import ScaleContainer from '@/components/ScaleContainer/index';
import EZUIKit from '@/utils/ezuikit.js';
import Header from './components/Header';
import TitleBg from './components/TitleBg';
import CarouselT from './components/CarouselT';
import CarouselT1 from './components/CarouselT1';
import CarouselT2 from './components/CarouselT2';
import CarouselT3 from './components/CarouselT3';
import ColumnarBody from './components/ColumnarBody';
import EchartsZhu from './components/echartsZhu';
import TableList from './components/TableList';
import TableListT from './components/TableListT';
import Line from './components/Line';

import Pie from './components/Pie';
import Select from './components/Select';
import Model from './components/Model';
import VideoList from './components/VideoList';
import { _getSysCompanyBaseList } from '@/api/sysCompanyBase';
import {
  _getBaseCondition,
  _getInfluentCondition,
  _getTailWaterCondition,
  _getShiftDutyCondition,
  _getDeviceCondition,
  _getDamageCondition,
  _getDamageRateCondition,
  _getFeedShiftDutyCondition,
  _getRepertoryCondition,
  _getObjFishTypes,
  _getGrowthCondition,
  _getVideoCondition,
  _getYsToken,
  _getNumericalDataCharts,
  _getWeightCondition,
  _getExecutepalnCondition,
  _getYearCondition,
  _getWaterInflowNumericalChat,
  _getDataDeviceAlarmList,
  _getDataScheduleTaskAlarmList,
  _getDataBoxPushAlarmList,
} from '@/api/baseCondition';
import { useEffect, useState, useCallback } from 'react';
import { getUserInfo, isFullscreen } from '@/utils';
import { Modal, Button } from 'antd';
import moment from 'moment';
import { ExclamationCircleFilled } from '@ant-design/icons';
const { confirm } = Modal;

export default function IndexPage() {
  const [userInfo, setUserInfo] = useState<any>(getUserInfo());
  const [companyBaseObj, setCompanyBaseObj] = useState<any>({}); //公司基地列表第一组数据
  const [baseCondition, setBaseCondition] = useState<any>({}); //基地总情况
  const [deviceCondition, setDeviceCondition] = useState<any>({}); //设备总情况
  const [influentCondition, setInfluentCondition] = useState<any>({}); //进水情况
  const [tailWaterCondition, setTailWaterCondition] = useState<any>({}); //尾水情况
  const [numericalChatO, setNumericalChatO] = useState<any>({}); //进水量图表1
  const [numericalChatT, setNumericalChatT] = useState<any>({}); //进水量图表2
  const [numericalDataCharts, setNumericalDataCharts] = useState<any>([]); //鱼池溶解氧数据分析
  const [videoCondition, setVideoCondition] = useState<any>([]); //全部摄像头
  const [damageCondition, setDamageCondition] = useState<any>([]); //货损情况
  const [executepalnCondition, setExecutepalnCondition] = useState<any>([]); //执行计划
  const [damageRateCondition, setDamageRateCondition] = useState<any>({}); //成活率
  const [objFishTypes, setObjFishTypes] = useState<any>([]); //所有鱼类
  const [fishsId, setFishsId] = useState<any>({ zl: -1, xs: -1, nf: -1 }); //重量、年份、腺性当前选择鱼类id

  const [indexCarouse, setIndexCarouse] = useState<number>(0); //进尾水索引
  const [shiftDutyCondition, setShiftDutyCondition] = useState<any>([]); //交接班情况
  const [repertoryCondition, setRepertoryCondition] = useState<any>([]); //库存情况
  const [weightCondition, setWeightCondition] = useState<any>([]); //重量
  const [yearCondition, setYearCondition] = useState<any>([]); //年份
  const [growthConditionResult, setGrowthConditionResult] = useState<any>([]); //腺性发育比例
  const [feedShiftDutyCondition, setFeedShiftDutyCondition] = useState<any>([]); //近一周投喂
  const [playObj, setPlayObj] = useState<any>({});
  const [playObjToken, setPlayToken] = useState<any>({});
  const [indexCarousel, setIndexCarousel] = useState<number>(0);
  const [alarmList, setAlarmList] = useState<any>([]); //告警
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false); //告警框
  /**
   * 获取第一个公司基地数据
   */
  const getSysCompanyBaseList = async () => {
    const res = await _getSysCompanyBaseList({
      companyId: userInfo.companyId,
    });
    if (res.code === 200) {
      const datas = (res.data?.data || [])?.map((item: any) => {
        return {
          ...item,
          value: item.id,
          label: item.name,
        };
      });
      if (datas && datas?.length > 0) {
        setCompanyBaseObj(datas[0]);
      }
    }
  };
  /**
   * 获取基地总情况
   */
  const getBaseCondition = async () => {
    const res = await _getBaseCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setBaseCondition(res?.data);
    }
  };
  /**
   * 设备总情况
   */
  const getDeviceCondition = async () => {
    const res = await _getDeviceCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setDeviceCondition(res?.data);
    }
  };
  /**
   * 进水情况
   */
  const getInfluentCondition = async () => {
    const res = await _getInfluentCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setInfluentCondition(res?.data);
    }
  };
  /**
   * 尾水情况
   */
  const getTailWaterCondition = async () => {
    const res = await _getTailWaterCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setTailWaterCondition(res?.data);
    }
  };
  /**
   * 尾水情况
   */
  const getWaterInflowNumericalChat = async (
    timeType: number,
    type: number,
  ) => {
    const res = await _getWaterInflowNumericalChat({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      timeType: timeType,
      type: type,
    });
    if (res.code === 200) {
      let datas = res.data;
      if (type === 0) {
        setNumericalChatO(datas);
      } else {
        setNumericalChatT(datas);
      }
    }
  };
  /**
   * 鱼池溶解氧数据分析
   */
  const getNumericalDataCharts = async () => {
    let day_prev = moment().subtract(1, 'day').format('YYYY-MM-DD');
    let day_new = moment().format('YYYY-MM-DD');
    const res = await _getNumericalDataCharts({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      ids: '1,7,14,22,28,32,38,44',
      model: 0,
      type: 1,
      startAndEndTime: `${day_prev},${day_new}`,
    });
    if (res.code === 200) {
      setNumericalDataCharts(res?.data);
    }
  };
  /**
   * 获取全部摄像头
   */
  const getVideoCondition = useCallback(async () => {
    const res = await _getVideoCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      let newData = res.data?.map((item: any) => {
        return {
          ...item,
          value: item.id,
          label: item.name,
        };
      });
      setVideoCondition(newData);
    }
  }, [companyBaseObj.id]);
  /**
   * 获取重量图表
   */
  const getWeightCondition = async () => {
    const res = await _getWeightCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      fishTypeId: fishsId.zl === -1 ? '' : fishsId.zl,
    });
    if (res.code === 200) {
      let newData = res?.data?.map((item: any) => {
        return {
          ...item,
          name: item.fishTypeName,
          value: item.weight,
        };
      });
      setWeightCondition(newData || []);
    }
  };
  /**
   * 年份
   */
  const getYearCondition = async () => {
    const res = await _getYearCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      fishTypeId: fishsId.nf === -1 ? '' : fishsId.nf,
    });
    if (res.code === 200) {
      let newData = res?.data?.map((item: any) => {
        return {
          ...item,
          name: item.year,
          value: item.num,
        };
      });
      setYearCondition(newData || []);
    }
  };
  /**
   * 获取腺性发育比例
   */
  const getGrowthCondition = async () => {
    const res = await _getGrowthCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      fishTypeId: fishsId.xs === -1 ? '' : fishsId.xs,
    });
    if (res.code === 200) {
      let newData = res?.data?.map((item: any) => {
        return {
          ...item,
          value: item.num,
          name: `卵径${item.diameter}`,
        };
      });
      setGrowthConditionResult(newData || []);
    }
  };
  useEffect(() => {
    if (companyBaseObj.id) {
      getWeightCondition();
      getYearCondition();
      getGrowthCondition();
    }
  }, [fishsId]);

  /**
   * 货损情况
   */
  const getDamageCondition = async () => {
    const res = await _getDamageCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setDamageCondition(res?.data);
    }
  };
  /**
   * 执行计划
   */
  const getExecutepalnCondition = async () => {
    const res = await _getExecutepalnCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      let a: any = [];
      res?.data.forEach((item: any) => {
        let date: any = new Date();
        let year: any = date.getFullYear();
        let month: any = date.getMonth() + 1;
        let day: any = date.getDate();
        let exeTime: any = new Date(
          year + '/' + month + '/' + day + ' ' + item.executeTime,
        ).getTime();
        let newTime: any = new Date().getTime();
        if (exeTime < newTime) {
          item.timeState = true;
        } else {
          item.timeState = false;
        }
      });
      setExecutepalnCondition(res?.data);
    }
  };
  /**
   * 成活率
   */
  const getDamageRateCondition = async () => {
    const res = await _getDamageRateCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setDamageRateCondition(res?.data);
    }
  };
  /**
   * 获取所有鱼类型
   */
  const getObjFishTypes = async () => {
    const res = await _getObjFishTypes({
      id: companyBaseObj.companyId,
    });
    if (res.code === 200) {
      let newData = res?.data?.map((item: any) => {
        return {
          ...item,
          value: item.id,
          label: item.fishName,
        };
      });
      newData.unshift({ label: '全部品种', value: -1 });
      setFishsId({ zl: -1, xs: -1, nf: -1 });
      setObjFishTypes(newData || []);
    }
  };
  /**
   * 交接班情况
   */
  const getShiftDutyCondition = async () => {
    const res = await _getShiftDutyCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setShiftDutyCondition(res?.data || []);
    }
  };
  /**
   * 库存情况
   */
  const getRepertoryCondition = async () => {
    const res = await _getRepertoryCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      let newData = res?.data?.map((item: any) => {
        return {
          ...item,
          value: item.num,
          name: item.varietyName,
        };
      });
      setRepertoryCondition(newData || []);
    }
  };

  /**
   * 近一周投喂
   */
  const getFeedShiftDutyCondition = async () => {
    const res = await _getFeedShiftDutyCondition({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      setFeedShiftDutyCondition(res?.data || []);
    }
  };

  const changeCarouse = (e: any) => {
    setIndexCarouse(e);
  };
  const getDataDeviceAlarmList = async () => {
    const res = await _getDataDeviceAlarmList({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    const res1 = await _getDataScheduleTaskAlarmList({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      type: 0,
    });
    const res2 = await _getDataScheduleTaskAlarmList({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
      type: 0,
    });
    const res3 = await _getDataBoxPushAlarmList({
      companyId: companyBaseObj.companyId,
      baseId: companyBaseObj.id,
    });
    if (res.code === 200) {
      let alarmArry = [];
      if (res.data?.data?.length > 0 && res.data?.data[0]?.endDate == null) {
        alarmArry.push(res.data.data[0]);
      }
      if (res1.data?.data?.length > 0 && res1.data?.data[0]?.endDate == null) {
        alarmArry.push(res1.data.data[0]);
      }
      if (res2.data?.data?.length > 0 && res2.data?.data[0]?.endDate == null) {
        alarmArry.push(res2.data.data[0]);
      }
      if (res3.data?.data?.length > 0 && res3.data?.data[0]?.endDate == null) {
        alarmArry.push(res3.data.data[0]);
      }
      let a: any = [];
      let sureAlarmList: any = JSON.parse(
        sessionStorage.getItem('sureAlarmList') || '[]',
      );
      alarmArry.forEach((item: any) => {
        let isNOt: any = true;
        sureAlarmList.forEach((itema: any) => {
          if (item.id == itema.id && item.startDate == itema.startDate) {
            isNOt = false;
          }
        });
        if (isNOt) {
          a.push(item);
        }
      });
      if (a.length > 0) {
        setIsModalOpen(true);
      } else {
        setIsModalOpen(false);
      }
      setAlarmList(a);
    }
  };
  useEffect(() => {
    let timerw: any = setInterval(() => {
      if (companyBaseObj.id) {
        getDataDeviceAlarmList();
      }
    }, 6000);
    return () => {
      clearInterval(timerw);
      timerw = null;
    };
  }, []);

  useEffect(() => {
    sessionStorage.setItem('sureAlarmList', '[]');
    if (companyBaseObj.id) {
      getWaterInflowNumericalChat(0, 0);
      getWaterInflowNumericalChat(0, 1);
      getNumericalDataCharts();
      getBaseCondition();
      getInfluentCondition();
      getTailWaterCondition();
      getVideoCondition();
      getDeviceCondition();
      getDamageCondition();
      getGrowthCondition();
      getFeedShiftDutyCondition();
      getObjFishTypes();
      getExecutepalnCondition();
      getDamageRateCondition();
      getWeightCondition();
      getYearCondition();
      getDataDeviceAlarmList;
    }
    let timerw: any = setInterval(() => {
      if (companyBaseObj.id) {
        getWaterInflowNumericalChat(0, 0);
        getWaterInflowNumericalChat(0, 1);
        getNumericalDataCharts();
        getBaseCondition();
        getInfluentCondition();
        getTailWaterCondition();
        // getVideoCondition();
        getDeviceCondition();
        getDamageCondition();
        getGrowthCondition();
        getFeedShiftDutyCondition();
        getObjFishTypes();
        getExecutepalnCondition();
        getDamageRateCondition();
        getWeightCondition();
        getYearCondition();
      }
    }, 300000);
    return () => {
      clearInterval(timerw);
      timerw = null;
    };
  }, [companyBaseObj]);
  useEffect(() => {
    getSysCompanyBaseList();
  }, []);
  useEffect(() => {
    if (!isFullscreen()) {
      confirm({
        title: '全屏',
        icon: <ExclamationCircleFilled />,
        content: '全屏效果更好哦，是否全屏',
        cancelText: '取消',
        okText: '确定',
        onOk() {
          let ele: any = document.body;
          if (ele.requestFullscreen) {
            ele.requestFullscreen();
          } else if (ele.mozRequestFullScreen) {
            ele.mozRequestFullScreen();
          } else if (ele.webkitRequestFullscreen) {
            ele.webkitRequestFullscreen();
          } else if (ele.msRequestFullscreen) {
            ele.msRequestFullscreen();
          }
        },
        onCancel() {
          console.log('Cancel');
        },
      });
    }
  }, []);
  return (
    <div className={styles.page}>
      <ScaleContainer width={1920} height={1080}>
        <div style={{ background: 'none', height: '1080px' }}>
          <Header info={userInfo} />
          <div className={styles.content}>
            <div className={styles.left}>
              {/* <div className={styles.left1}> */}
              <div className={styles.lefttop}>
                <div className={styles.lefttopl}>
                  <div className={`${styles.left11} ${styles.borderbg}`}>
                    <TitleBg>
                      <span>基地总情况</span>
                    </TitleBg>
                    <div className={`${styles.jszqk}`}>
                      <div className={styles.block}>
                        <div className={styles.div1}>占地面积</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{baseCondition?.area}</span>亩
                        </div>
                      </div>
                      <div className={styles.block}>
                        <div className={styles.div1}>鱼池数量</div>
                        <div style={{ color: '#62F5F7' }}>
                          <span>{baseCondition?.fishpondNumber}</span>个
                        </div>
                      </div>
                      <div className={`${styles.block} ${styles.blocknot}`}>
                        <div className={styles.div1}>养殖量</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{baseCondition?.breedCapacity}</span>吨
                        </div>
                      </div>

                      <div className={styles.block}>
                        <div className={styles.div1}>养殖密度</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{baseCondition?.breedDensity}</span>每立方
                        </div>
                      </div>
                      <div className={styles.block}>
                        <div className={styles.div1}>产量</div>
                        <div style={{ color: '#62F5F7' }}>
                          <span>{baseCondition?.production}</span>吨
                        </div>
                      </div>
                      <div className={`${styles.block} ${styles.blocknot}`}>
                        <div className={styles.div1}>计划养殖量</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{baseCondition?.planBreedCapacity}</span>吨
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    className={`${styles.left11} ${styles.left12} ${styles.borderbg}`}
                  >
                    <TitleBg>
                      <span>设备情况</span>
                    </TitleBg>
                    <div className={`${styles.jszqk}`}>
                      <div className={`${styles.block} ${styles.block1}`}>
                        <div className={styles.div1}>设备总数</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{deviceCondition?.deviceTotal}</span>个
                        </div>
                      </div>
                      <div className={`${styles.block} ${styles.block1}`}>
                        <div className={styles.div1}>在线数</div>
                        <div style={{ color: '#03DF79' }}>
                          <span>{deviceCondition?.deviceOnline}</span>个
                        </div>
                      </div>
                      <div className={`${styles.block} ${styles.block1}`}>
                        <div className={styles.div1}>离线数</div>
                        <div style={{ color: '#E8DD68' }}>
                          <span>{deviceCondition?.deviceOffline}</span>个
                        </div>
                      </div>
                      <div
                        className={`${styles.block} ${styles.block1} ${styles.blocknot}`}
                      >
                        <div className={styles.div1}>告警数</div>
                        <div style={{ color: '#FF4E4E' }}>
                          <span>{deviceCondition?.alarmNumber}</span>个
                        </div>
                      </div>
                      <div className={`${styles.block}`}>
                        <div className={styles.div1}>电压</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{deviceCondition?.voltage}</span>V
                        </div>
                      </div>
                      <div className={`${styles.block}`}>
                        <div className={styles.div1}>功率</div>
                        <div style={{ color: '#62F5F7' }}>
                          <span>{deviceCondition?.power}</span>W
                        </div>
                      </div>
                      <div className={`${styles.block} ${styles.blocknot}`}>
                        <div className={styles.div1}>用电量</div>
                        <div style={{ color: '#0D9FFE' }}>
                          <span>{deviceCondition?.powerUsage}</span>kw·h
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div className={styles.lefttopr}></div>
              </div>

              {/* </div> */}
              <div className={styles.left2}>
                <div className={`${styles.left21} ${styles.borderbg}`}>
                  <TitleBg>
                    <span>进水</span>
                  </TitleBg>
                  <CarouselT
                    changeCarouse={changeCarouse}
                    tailWaterCondition={tailWaterCondition}
                    influentCondition={influentCondition}
                  />
                </div>
                <div className={`${styles.left21} ${styles.borderbg}`}>
                  <TitleBg>
                    <span>尾水</span>
                  </TitleBg>
                  <CarouselT1
                    changeCarouse={changeCarouse}
                    tailWaterCondition={tailWaterCondition}
                    influentCondition={influentCondition}
                  />
                </div>
              </div>
              <div className={styles.left2}>
                <div className={`${styles.left21} ${styles.borderbg}`}>
                  <TitleBg>
                    <span>排水</span>
                  </TitleBg>
                  <Line items={numericalChatO} />
                  {/* <CarouselT2
                    changeCarouse={changeCarouse}
                    tailWaterCondition={tailWaterCondition}
                    influentCondition={influentCondition}
                  /> */}
                </div>
                <div className={`${styles.left21} ${styles.borderbg}`}>
                  <TitleBg>
                    <span>排水</span>
                  </TitleBg>

                  <Line items={numericalChatT} />
                </div>
              </div>
              <div className={`${styles.left3} ${styles.borderbg}`}>
                <TitleBg>
                  <span>鱼池溶解氧数据分析</span>
                </TitleBg>
                <ColumnarBody
                  numericalDataCharts={numericalDataCharts}
                  feedShiftDutyCondition={feedShiftDutyCondition}
                />
              </div>
            </div>
            <div className={styles.cen}>
              <div className={styles.cen1}>
                <div style={{ width: 600, height: 346, position: 'relative' }}>
                  <iframe
                    style={{ width: 600, height: 346, cursor: 'pointer' }}
                    src={`${window.location.origin}${window.location.pathname}#/index?companyId=${companyBaseObj.companyId}&baseId=${companyBaseObj.id}&type=1`}
                    frameborder="0"
                  ></iframe>
                  <div
                    onClick={() => {
                      window.open(
                        `${window.location.origin}${window.location.pathname}#/index?companyId=${companyBaseObj.companyId}&baseId=${companyBaseObj.id}`,
                      );
                    }}
                    className={styles.zzc}
                  ></div>
                </div>
              </div>
              <div className={styles.videoBox}>
                <VideoList videoCondition={videoCondition} />
              </div>
            </div>
            <div className={styles.right}>
              <div className={styles.rightTop}>
                <div className={styles.rightTopL}>
                  <div
                    className={`${styles.right01} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>一个月货损</span>
                    </TitleBg>
                    <div className={styles.right01Box}>
                      <TableList damageCondition={damageCondition} />
                    </div>
                  </div>
                  <div
                    className={`${styles.right02} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>存活率</span>
                    </TitleBg>
                    <div className={styles.right02Box}>
                      <div className={styles.div1}>
                        <span className={styles.span1}>
                          {damageRateCondition?.monthDamageRate}
                        </span>
                        <span className={styles.span2}>月存活率</span>
                      </div>
                      <div className={styles.div1}>
                        <span className={styles.span1}>
                          {damageRateCondition?.yearDamageRate}
                        </span>
                        <span className={styles.span2}>年存活率</span>
                      </div>
                    </div>
                  </div>
                  <div
                    className={`${styles.right03} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>腺素发育</span>
                    </TitleBg>
                    <div className={styles.right03Box}>
                      <div className={styles.selectBo}>
                        <Select
                          onChange={(e: any) => {
                            setFishsId({ ...fishsId, xs: e.value });
                          }}
                          ac={objFishTypes[0]?.value ? objFishTypes[0] : {}}
                          op={objFishTypes}
                        />
                      </div>
                      <div className={styles.pieBox}>
                        <Pie data={growthConditionResult} />
                      </div>
                    </div>
                  </div>
                </div>
                <div className={styles.rightTopR}>
                  <div
                    className={`${styles.right04} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>执行计划表</span>
                    </TitleBg>
                    <div className={styles.right04Box}>
                      <TableListT executepalnCondition={executepalnCondition} />
                    </div>
                  </div>
                  <div
                    className={`${styles.right05} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>重量</span>
                    </TitleBg>
                    <div className={styles.right05Box}>
                      <div className={styles.selectBo}>
                        <Select
                          onChange={(e: any) => {
                            setFishsId({ ...fishsId, zl: e.value });
                          }}
                          ac={objFishTypes[0]?.value ? objFishTypes[0] : {}}
                          op={objFishTypes}
                        />
                      </div>
                      <div className={styles.pieBox}>
                        <Pie data={weightCondition} />
                      </div>
                    </div>
                  </div>
                  <div
                    className={`${styles.right06} ${styles.borderbg} bgColor`}
                  >
                    <TitleBg>
                      <span>年份</span>
                    </TitleBg>
                    <div className={styles.right06Box}>
                      <div className={styles.selectBo}>
                        <Select
                          onChange={(e: any) => {
                            setFishsId({ ...fishsId, nf: e.value });
                          }}
                          ac={objFishTypes[0]?.value ? objFishTypes[0] : {}}
                          op={objFishTypes}
                        />
                      </div>
                      <div className={styles.pieBox}>
                        <Pie data={yearCondition} />
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div className={`${styles.rightBottom} ${styles.borderbg}`}>
                <TitleBg>
                  <span>近一周投喂</span>
                </TitleBg>
                <EchartsZhu feedShiftDutyCondition={feedShiftDutyCondition} />
              </div>
            </div>
          </div>
          {alarmList.length > 0 ? (
            <Modal
              width={420}
              wrapClassName={'alarmBoxa'}
              footer={
                <Button
                  onClick={() => {
                    setIsModalOpen(false);
                    let a: any = JSON.parse(
                      sessionStorage.getItem('sureAlarmList') || '[]',
                    );
                    a.push(alarmList[0]);
                    sessionStorage.setItem('sureAlarmList', JSON.stringify(a));
                    setTimeout(function () {
                      let sureAlarmList: any = JSON.parse(
                        sessionStorage.getItem('sureAlarmList') || '[]',
                      );
                      if (sureAlarmList.length > 0) {
                        var newArr: any = sureAlarmList.slice(1);
                        sessionStorage.setItem(
                          'sureAlarmList',
                          JSON.stringify(newArr),
                        );
                      }
                    }, 180000);
                  }}
                  type="primary"
                >
                  确定
                </Button>
              }
              title="报警提醒"
              open={isModalOpen}
              onCancel={() => {
                setIsModalOpen(false);
                let a: any = JSON.parse(
                  sessionStorage.getItem('sureAlarmList') || '[]',
                );
                a.push(alarmList[0]);
                sessionStorage.setItem('sureAlarmList', JSON.stringify(a));
                setTimeout(function () {
                  let sureAlarmList: any = JSON.parse(
                    sessionStorage.getItem('sureAlarmList') || '[]',
                  );
                  if (sureAlarmList.length > 0) {
                    var newArr: any = sureAlarmList.slice(1);
                    sessionStorage.setItem(
                      'sureAlarmList',
                      JSON.stringify(newArr),
                    );
                  }
                }, 180000);
              }}
              okText="确定"
              cancelText={null}
            >
              <div className={styles.alarmBox}>
                <img
                  className={styles.alarmImg}
                  src={require('@/assets/alrm.png')}
                  alt=""
                />
                <h3 className={styles.alarmText}>
                  {alarmList[0].fishpondName
                    ? alarmList[0].fishpondName + '鱼池'
                    : alarmList[0].deviceName}
                  {alarmList[0].alarmType}
                </h3>
              </div>
            </Modal>
          ) : null}
        </div>
      </ScaleContainer>
    </div>
  );
}
